<template>
  <div name="Aside">
    <el-menu
      v-for="item in menuList"
      :key="item.router"
      :default-active="$route.path"
    >
      <el-menu-item @click="routerPush(item.route)" :index="item.route"
        >{{ item.text
        }}<el-badge v-if="item.num" :value="item.num" class="item"> </el-badge>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { getCount, getHistoryCount } from "../../api/data";
export default {
  name: "Aside",
  props: {},
  components: {},
  data() {
    return {
      activePath: null,
      menuList: [
        { text: "开始听课", route: "/typeSelect" },
        { text: "进行中的", route: "/listening", num: 0 },
        { text: "历史听课", route: "/historyList", num: 0 },
        { text: "其他设置", route: "/setting" },
      ],
    };
  },
  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
    this.getTheCount();
  },
  methods: {
    async getTheCount() {
      const res = await getCount(0);

      if (res.status === 200) {
        this.menuList[1].num = res.data.result.totalCount;
        if (this.listeningCount == 0) {
          this.listeningCount = "";
        }
        const res2 = await getHistoryCount(this.semester);
        this.menuList[2].num = res2.data.result.totalCount;
      }
    },
    routerPush(route) {
      // 保存连接的激活状态

      // 把信息保存到 sessionStorage 中 window.sessionStorage.setItem("键名字", 键值);
      window.sessionStorage.setItem("activePath", route);
      // 并把这个 高亮信息保存到数据中
      this.activePath = route;
      this.$router.push(route);
    },
  },
  computed: {},
  mounted() {},
};
</script>

<style scoped>
.item {
  transform: translate(5%, -5%);
}
</style>
